<template>
    <div>
        <el-container>
            <el-header>XXX大型后台管理系统
                <div>
                    <span>欢迎VIP金主==>{{ $store.getters.getUser.username }}</span>
                    <el-button type="danger" size="mini" @click="out">退出登录</el-button>
                </div>
            </el-header>

            <el-container>
                <el-aside width="220px">
                    <v-nav></v-nav>
                </el-aside>
                <el-main>
                    <!-- 二级路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import vNav from '../components/vNav'
export default {
    data() {
        return {

        };
    },
    methods: {
        out() {
            this.$confirm("你确定要退出登录吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    //触发行动并跳转登录
                    this.$message({
                        type:'success',
                        message: "已成功退出",
                    })
                    this.$store.dispatch('changeUserAction', false)
                    this.$router.push('/login')
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消退出",
                    });
                })

        }
    },
    components: {
        vNav,
    },
};
</script>

<style scoped>
.el-header {
    background-color: pink;
}
</style>
